<template>
  <el-dialog
    v-model="visible"
    title="证书文件"
    width="900"
    show-footer
    show-zoom
    resize
    @close="close"
    :z-index="2000"
  >
    <el-tabs v-model="activeName" type="card" class="w-full">
      <el-tab-pane label="产品规格书" name="1"></el-tab-pane>
      <el-tab-pane label="认证证书" name="2"></el-tab-pane>
      <el-tab-pane label="样品检测报告" name="3"></el-tab-pane>
      <el-tab-pane label="产品丝印" name="4"></el-tab-pane>
      <el-tab-pane label="产品包装图" name="5"></el-tab-pane>
      <el-tab-pane label="产品说明书" name="6"></el-tab-pane>
      <el-tab-pane label="产品文案" name="8"></el-tab-pane>
      <el-tab-pane label="其他" name="7"></el-tab-pane>
    </el-tabs>
    <el-table border height="300" :data="computedList(certificate_list)">
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="certificate_type" label="证书类型" v-if="props.type == 2">
        <template #default="{ row }">
          <template v-if="handleType != 'view'">
            <el-select v-model="row.certificate_type" filterable>
              <el-option
                v-for="item in options['goods.GoodsSpu']?.[0].authenticationText"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </template>
          <span v-else>{{ formatType(row.certificate_type) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="filename" label="文件名称">
        <template #default="{ row }">
          <el-input v-model="row.filename" placeholder="请输入文件名称"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注说明" v-if="activeName != 2">
        <template #default="{ row }">
          <template v-if="handleType != 'view'">
            <el-input v-model="row.remark" placeholder="请输入备注说明"></el-input>
          </template>
          <template v-else>
            {{ row.remark }}
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="操作" v-if="handleType != 'view'">
        <template #default="{ row, $index }">
          <el-button style="margin-right: 10px" type="primary" @click="copyRow(row)"
            >复制</el-button
          >
          <el-button type="primary" @click="download(row)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="flex justify-center items-center">
        <div><el-button @click="close">关闭</el-button></div>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="CertificateInformation">
import { reactive, ref, toRefs } from "vue";
import { getSKUCertificate } from "./api.js";
import { copy } from "@/utils/index";
import { downloadFile } from "@/utils/downloadFile.js";

import { ElMessage, ElSelect } from "element-plus";
const visible = ref(false);
const loading = ref(false);

const props = defineProps({
  options: {
    type: Object,
    default: {},
  },
});

const data = reactive({
  form: null,
  handleType: "",
  title: "",
  certificate_list: [],
  activeName: "1",
});

const { form, handleType, certificate_list, activeName } = toRefs(data);

// 初始化
const getForm = () => {
  return {
    spu_ids: null,
    certificate: [],
  };
};

const open = (sku_id) => {
  getCertificate(sku_id);
  visible.value = true;
};

const computedList = (goods_sku_certificate) => {
  return goods_sku_certificate.filter(
    (item) => item.certificate_class == activeName.value
  );
};

const close = () => {
  visible.value = false;
};

const initForm = () => {
  form.value = getForm();
};

const getCertificate = async (sku_id) => {
  // certificate_list.value = [{
  //     "id": 18,
  //     "spu_id": 47724,
  //     "sku_id": 49785,
  //     "certificate_class": 2,
  //     "certificate_type": 2,
  //     "filename": "20231018-093944169762640462831.jpeg",
  //     "remark": null,
  //     "filepath": "http://xc-goods.oss-cn-shenzhen.aliyuncs.com/goods/20231018/20231018-093944169762640462831.jpeg",
  //     "is_delete": 0,
  //     "delete_by": 0,
  //     "delete_time": null,
  //     "is_push_sai_he": 0,
  //     "sku": ""
  //   },
  //   {
  //     "id": 19,
  //     "spu_id": 47724,
  //     "sku_id": 49785,
  //     "certificate_class": 2,
  //     "certificate_type": 4,
  //     "filename": "测试推送11116976266940341.jpeg",
  //     "remark": null,
  //     "filepath": "http://xc-goods.oss-cn-shenzhen.aliyuncs.com/goods/20231018/%E6%B5%8B%E8%AF%95%E6%8E%A8%E9%80%8111116976266940341.jpeg",
  //     "is_delete": 0,
  //     "delete_by": 0,
  //     "delete_time": null,
  //     "is_push_sai_he": 0,
  //     "sku": ""
  //   },
  //   {
  //     "id": 20,
  //     "spu_id": 47724,
  //     "sku_id": 49785,
  //     "certificate_class": 1,
  //     "certificate_type": 0,
  //     "filename": "汇率169762850842695.xlsx",
  //     "remark": null,
  //     "filepath": "http://xc-goods.oss-cn-shenzhen.aliyuncs.com/goods/20231018/%E6%B1%87%E7%8E%87169762850842695.xlsx",
  //     "is_delete": 0,
  //     "delete_by": 0,
  //     "delete_time": null,
  //     "is_push_sai_he": 0,
  //     "sku": ""
  //   }]
  try {
    const res = await getSKUCertificate({
      sku_id,
    });
    certificate_list.value = res.data;
  } catch (e) {
    throw Error(e);
  }
};

const copyRow = (item) => {
  copy(item.filepath);
};
const download = (item) => {
  downloadFile(item.filepath, item.filename);
};

onMounted(() => {
  initForm();
});
defineExpose({ open });
</script>
<style lang="scss" scoped>
.uploadBox {
  height: 52px;
  border-radius: 4px;
  border: 1px dashed #3366f1;
  justify-content: center;
  align-items: center;

  .v-upload {
    width: 100%;
    height: 100%;

    :deep(.el-upload) {
      width: 100%;
      height: 52px;
    }
  }
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.upload-file-uploader {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 178px;
  text-align: center;
  border: 1px dashed var(--el-border-color);
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-upload-list) {
  width: 100%;
  display: flex;
  flex-direction: column;

  .el-upload-list__item {
    width: 100%;
    padding: 3px 50px;
  }
}

.row {
  .row-title {
    font-size: 14px;
    font-weight: bold;
    color: #0a1431;
    line-height: 20px;
    padding: 8px 0;
  }
}

.upload-area {
  background: #fafafa;
  border-radius: 4px;

  .upload-tips {
    font-size: 12px;
    font-weight: 400;
    color: #9da1ad;
    line-height: 17px;
    text-align: center;
    padding: 4px 0;
  }
}
</style>
